@charset "utf-8";
/* 0- */
@media (min-width: 0px) {
/* header */
header {
	/* 引用背景图片 */
	background-image: url(../images/headerpic.png);
	/* 图片位置 */
	background-position: left top;
	/* 重复效果 */
	background-repeat: repeat-x;
	margin: 0 auto 40px; padding-top: 70px; width: 96%;
}
header > a { text-decoration: none; color: #0d0c0c; font-size: 60px; letter-spacing: -3px; }
header > a span { color: #dfdada; }
header > nav { width: 100%; border-bottom: 5px double #bfbfbf; padding:20px 0 10px; display: table; }
header > nav > ul { display: table-row; }
header > nav > ul > span { display: none; }
header > nav > ul > li { text-align: center; display: table-cell; }
header > nav > ul > li > a { font-size: 35px; text-decoration: none; }
header > nav > ul > li > a:hover { 
	-webkit-animation-name: shining;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes shining {
	0% { text-shadow: 0 0 3px #EEC900, 0 0 3px #000; }
	50% { text-shadow: 0 0 35px #EEC900, 0 0 35px #000; }
	100% { text-shadow: 0 0 3px #EEC900, 0 0 3px #000; }
}
header > nav > ul > li:first-of-type { text-decoration: underline; text-align: left; }
header > nav > ul > li:nth-of-type(odd) > a { color: red; }
header > nav > ul > li:nth-of-type(even) > a { color: black; }
header > nav > ul > li:last-of-type { text-align: right; }
/* article */
#content { float: right; margin-right: 2%; width: 72%; }
article > img { width: 25%; float: left; margin-right: 1%; margin-bottom: 50px; }
article > h1 { font-size: 110px; font-weight: 400; text-shadow:2px 0 0 white, 4px 4px 1px #dad7d7; margin-bottom: 20px; letter-spacing: 5px; }
article > em { width: 55%; float: left; word-wrap: break-word; font-size: 40px; color: #504e4e; text-shadow: none; margin-right: 19%; margin-bottom: 15px;  }
article > p { font-family: 'ColaborateThinRegular'; color: #757474; font-size: 40px; line-height: 45px; margin-bottom: 15px; }
article > p:nth-of-type(2) { margin-bottom: 30px; }
article > button { transition: all 1s ease; padding: 20px 35px; background-color: #b01c20; font-size: 40px; border-radius: 8px; box-shadow: 1px 1px 0 -1px white, 3px 3px 5px black; color: white; }
article > button > span { transition: all .5s; }
article > button:hover { color: #000; border: 1px solid #000; text-shadow: 0 1px #fff; box-shadow: 1px 1px 5px #000 inset; }
/* aside */
aside { float: left; width: 21%; margin-left: 2%; border-right: 2px solid #e8e8e8; padding-right: 2%; background: radial-gradient(#cfcfcf, #fff 85%); }
aside > section { margin-bottom: 10px; }
aside h1 { text-align: left; margin-bottom: 30px; }
aside a {  float: left; width: 50%; text-align: center; }
aside img { max-width: 98%; border-radius: 5px; box-shadow: 0px 3px 6px -1px #444; }
aside a:nth-of-type(even) img { transform: rotate(3deg); }
aside a:nth-of-type(odd) img { transform: rotate(-3deg); }
aside img {
	-webkit-animation-name: swing;
    -webkit-animation-duration: .2s;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes swing {
	0% { -webkit-transform: scale(.9, .9); }
	50% { -webkit-transform: scale(.98, .98); }
	100% { -webkit-transform: scale(0.9, 0.9); }
}
aside button { text-align: center; width: 90%; border: 1px solid #999; color: #5c5959; margin: 15px 0; border-radius: 10px; font-size: 16px; background-color: inherit; }
/* footer */
footer {
	/* 引用背景图片 */
	background-image: url(../images/footerpic.png);
	/* 图片位置 */
	background-position: left bottom;
	/* 重复效果 */
	background-repeat: repeat-x;
	border-top: 5px double #bfbfbf; width: 96%; float: left; text-align: center; padding-bottom: 40px;
}
footer > p { color: #757574; font-size: 20px; margin: 15px 20px 25px; word-wrap: break-word; }
footer > p > span > a { color: #bfbfbf; font-size: inherit; }
}

/*	0-768	*/
@media (max-width: 768px) {
/* header */
header { text-align: left; }
header > a { font-size: 45px; }
header > nav > ul > li > a { font-size: 30px; }
nav { position: relative; padding: 25px 0 !important;  }
nav ul {
	/* 引用背景图片 */
	background-image: url(../images/menu.png);
	/* 图片位置 */
	background-position: 5px 7px;
	/* 重复效果 */
	background-repeat: no-repeat;
	background-color: #fff;
	letter-spacing: 1px; border: 1px solid #bfbfbf; position: absolute; top: 10px; left: 0; padding: 5px 10px; padding-left: 30px; box-shadow: 1px 1px 3px #666; border-radius: 5px; 
}
nav ul span { display: block !important; color: #504e4e; letter-spacing: 2px; }
nav ul li:first-of-type { margin-top: 10px; text-decoration: none !important; }
nav ul li:last-of-type { border-bottom: none; }
nav ul li { display: none !important; text-align: inherit !important; border-bottom: 1px solid #bfbfbf; }
nav ul li a { color: #757474 !important; font-size: 20px !important; float: inherit !important; line-height: 35px; }
.liShow { display: block !important; }
/* article */
#content { float: inherit; width: 96%; margin: 0 0 25px; border-bottom: 2px solid #bfbfbf; padding-bottom: 20px; margin: 0 auto 20px; }
article > h1 { font-size: 70px; }
article > em { font-size: 35px; }
article > p { font-size: 30px; line-height: 35px; }
article > p:nth-of-type(2) { margin-bottom: 30px; }
article > button { width: 100%; font-size: 20px; letter-spacing: 8px; padding: 20px 30px; }
/* section */
aside { width: 96%; border-right: none; margin: 0 auto 10px; padding: 0; float: inherit; }
aside img { max-width: 95%; }
aside button { width: 80%; }
/* footer */
}
/* 0-320 */
@media (min-width: 0px) and (max-width: 320px) {
article > h1 { font-size: 55px; }
article > em { font-size: 25px; margin-bottom: 10px; }
article > p { font-size: 20px; line-height: 30px; }
article > p:nth-of-type(2) { margin-bottom: 20px; }
}

/* 768-992 */
@media (min-width: 768px) and (max-width: 992px) {
/* header */
header > a { font-size: 50px; }
/* article */
article > h1 { font-size: 90px; }
article > em { font-size: 25px; }
article > p { font-size: 25px; line-height: 30px; }
article > p:nth-of-type(2) { margin-bottom: 25px; }
article > button { font-size: 18px; padding: 10px 25px; }
nav li a { font-size: 30px !important; }
/* aside */
aside button { width: 95%; font-size: 12px; }
/* footer */
}

/* 992-1200 */
@media (min-width: 992px) and (max-width: 1200px) {
/* header */
/* article */
article > h1 { font-size: 90px; }
article > em { font-size: 30px; margin-bottom: 10px; }
article > p { font-size: 30px; line-height: 35px; }
article > button { font-size: 25px; padding: 15px 30px; }
/* footer */
}

/* 1200- */
@media (min-width: 1200px) {
}